import { setSessionItem, getSessionItem } from "@/basa/utils";
export default {
  data() {
    return {
      // loading: true,
      isActive: 0,
      focuses: [
        { focus: "un-submitted" },
        { focus: "under-approval" },
        { focus: "no-approval" },
        { focus: "return-approval" }
      ],
      storageTypeList: [
        { dicValue: "正式入库", dicKey: 1 },
        { dicValue: "暂估入库", dicKey: 2 }
      ],
      // 表格数据
      tableData: [],
      tableHack: true,
      // 表格命名
      tableName: this.tableList.peoplemanageItemListAll,
      // 表格数据
      tableThead: [],
      // 锁定表格
      fixedTableThead: [
        {
          label: "序号",
          prop: "id",
          width: "38",
          checked: true,
          fixed: true,
          type: "index"
        }
      ],
      // 非锁定表格
      unfixedTableThead: [
        {
          label: "姓名",
          prop: "userName",
          width: "62",
          checked: true
        },
        {
          label: "性别",
          prop: "sex",
          width: "60",
          checked: true,
          formatterName: "sexHandler"
        },
        {
          label: "出生日期",
          prop: "birthday",
          width: "120",
          checked: true,
          formatterName: "birthdayFormat"
        },
        {
          label: "年龄",
          prop: "age",
          width: "60",
          checked: true
        },
        {
          label: "身份证号",
          prop: "idNum",
          width: "160",
          checked: true,
          formatterName: "idNumHandle"
        },
        {
          label: "手机号",
          prop: "userMobile",
          width: "120",
          checked: true,
          formatterName: "userMobileHandle"
        },
        {
          label: "政治面貌",
          prop: "politicalOutlook",
          width: "70",
          checked: true,
          formatterName: "outlookHandler"
        },
        {
          label: "婚姻状况",
          prop: "isMarried",
          width: "70",
          checked: true,
          formatterName: "ismarriedHandler"
        },
        {
          label: "籍贯",
          prop: "nativeplace",
          width: "138",
          checked: true,
          formatterName: "nativeplaceHandler"
        },
        {
          label: "毕业院校",
          prop: "finishSchool",
          width: "120",
          checked: true
        },
        {
          label: "所在部门",
          prop: "departmentId",
          width: "136",
          checked: true
        },
        {
          label: "是否在编",
          prop: "isPrep",
          width: "70",
          checked: true,
          formatterName: "isPrepHandler"
        }
      ],
      // 动态表格
      tableTheadOptions: [],
      // 弹框表格
      popoverShow: false,
      selectRow: [],
      selectData: [],
      isFocus: 1,
      // 高级搜索数据 start
      // 高级搜索提交数据
      isShowSearch: true,
      formData: {
        userName: "",
        sex: "",
        birthday: "",
        politicalOutlook: "",
        isMarried: "",
        idNum: ""
      },
      formDataSearch: "",
      politicalOutlookOptions: [
        {
          label: "群众",
          value: "1"
        },
        {
          label: "团员",
          value: "2"
        },
        {
          label: "党员",
          value: "3"
        }
      ],
      // 高级搜索数据 end
      isShowPagination: false, //无数据的不展示底部全选，批量删除
      // 分页相关
      totalNum: null,
      pageNoCode: 1,
      pageSizeCode: this.getLocalPageSize(),
      // 删除相关
      isSelection: false,
      typeDel: "",
      delDemoId: "",
      content: "您确定要删除吗？",
      // 排序入参所需字段
      sortord: "",
      sortprop: "",
      // 全选相关
      isIndeterminate: false,
      checkAll: false,
      // 筛选字段调用函数集合
      filterMethodList: {
        filterHandler: (value, row, column) => {
          const property = column["property"];
          return row[property] === value;
        }
      },
      // 表格数据相关处理
      formatterList: {
        sexHandler(row, col) {
          switch (row.sex) {
            case 1:
              return "男";
            case 2:
              return "女";
          }
        },
        ismarriedHandler(row, col) {
          switch (row.isMarried) {
            case 1:
              return "未婚";
            case 2:
              return "已婚";
            case 3:
              return "离异";
            case 4:
              return "丧偶";
          }
        },
        outlookHandler(row, col) {
          switch (row.politicalOutlook) {
            case 1:
              return "群众";
            case 2:
              return "团员";
            case 3:
              return "党员";
          }
        },
        nativeplaceHandler(row, col) {
          let nativeplace = `${row.receiveProvince}${row.receiveCity}${row.receiveCounty}${row.receiveTowns}`;
          return nativeplace;
        },
        birthdayFormat(row, col) {
          return row.birthday ? row.birthday.substr(0, 10) : "";
        },
        userMobileHandle(row) {
          var reg = /(\d{3})\d{4}(\d{4})/;
          return row.userMobile
            ? (row.userMobile = row.userMobile.replace(reg, "$1****$2"))
            : (row.userMobile = "");
        },
        idNumHandle(row) {
          var reg = /(\d{6})(\d+)(\d{3}[0-9xX])/;
          return row.idNum
            ? (row.idNum = row.idNum.replace(reg, "$1********$3"))
            : (row.idNum = "");
        },
        isPrepHandler(row) {
          switch (row.isPrep) {
            case 0:
              return "否";
            case 1:
              return "是";
          }
        }
      }
    };
  },
  mounted() {
    this.initData();
  },
  watch: {
    selectData(data) {
      this.selectRow = [];
      if (data.length > 0) {
        data.forEach((item, index) => {
          this.selectRow.push(this.tableData.indexOf(item));
        });
      }
    }
  },
  methods: {
    initData() {
      this.setBreadcrumb();
      this.setTableWidth();
      this.renderTable();
    },
    // 导出 end
    popoverClose() {
      this.popoverShow = false;
    },
    // 根据返回状态显示不同的文字颜色
    // eslint-disable-next-line no-unused-vars
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { "background-color": "transparent" };
      }
    },
    // 默认渲染表格
    renderTable() {
      const localTableData = localStorage.getItem(this.tableName)
        ? JSON.parse(localStorage.getItem(this.tableName))
        : [];
      let unfixedTableThead = this.fixedTableThead.concat(
        this.unfixedTableThead
      );
      let localTableDataStr = localTableData.map(
        ({ label, prop, formatter, align }) =>
          JSON.stringify({ label, prop, formatter, align })
      );
      let unfixedTableTheadStr = unfixedTableThead.map(
        ({ label, prop, formatter, align }) =>
          JSON.stringify({ label, prop, formatter, align })
      );

      if (localTableData.length === unfixedTableThead.length) {
        let flag = localTableDataStr.every(item =>
          unfixedTableTheadStr.includes(item)
        );
        if (flag) {
          // 完全相同
          this.tableTheadOptions = localTableData;
          this.tableThead = localTableData;
          localTableData.forEach(item => {
            let index = this.unfixedTableThead.findIndex(
              cItem => item.prop === cItem.prop
            );
            index !== -1 &&
              (this.unfixedTableThead[index].checked = item.checked);
          });
        } else {
          // 长度相同但值不同
          this.tableThead = this.fixedTableThead.concat(this.unfixedTableThead);
          const comment = JSON.stringify(this.tableThead);
          localStorage.setItem(this.tableName, comment);
          const localTableData = JSON.parse(
            localStorage.getItem(this.tableName)
          );
          this.tableTheadOptions = localTableData;
        }
      } else {
        // 长度不同
        this.tableThead = this.fixedTableThead.concat(this.unfixedTableThead);
        const comment = JSON.stringify(this.tableThead);
        localStorage.setItem(this.tableName, comment);
        const localTableData = JSON.parse(localStorage.getItem(this.tableName));
        this.tableTheadOptions = localTableData;
      }
    },
    // 表格弹框拖拽触发
    handleTableChange(val) {
      const comment = JSON.stringify(this.tableTheadOptions);
      localStorage.setItem(this.tableName, comment);
    },
    // 是否显示对应列
    handleUpdate(item, index) {
      for (let i = 0; i < this.unfixedTableThead.length; i++) {
        if (i === index) {
          this.unfixedTableThead.checked = !this.unfixedTableThead.checked;
        }
      }
      this.tableThead = this.unfixedTableThead.concat(this.fixedTableThead);
      const comment = JSON.stringify(this.tableThead);
      localStorage.setItem(this.tableName, comment);
      const localTableData = JSON.parse(localStorage.getItem(this.tableName));
      this.tableTheadOptions = localTableData;
    },
    // 渲染本地存储表格宽度
    setTableWidth() {
      const localTableData = JSON.parse(localStorage.getItem(this.tableName));
      if (localTableData) {
        for (let i = 0; i < this.tableTheadOptions.length; i++) {
          if (this.tableTheadOptions[i].label === localTableData[i].label) {
            this.tableTheadOptions[i].width = localTableData[i].width;
          }
        }
      }
    },
    // 表格宽度更改存入
    tableTitleWidth(newWidth, oldWidth, column, event) {
      for (let i = 0; i < this.unfixedTableThead.length; i++) {
        if (this.unfixedTableThead[i].label === column.label) {
          this.unfixedTableThead[i].width = newWidth;
        }
      }
      this.tableThead = this.unfixedTableThead.concat(this.fixedTableThead);
      const comment = JSON.stringify(this.tableThead);
      localStorage.setItem(this.tableName, comment);
      this.tableTheadOptions = JSON.parse(localStorage.getItem(this.tableName));
      this.tableHack = false;
      this.$nextTick(() => {
        this.tableHack = true;
      });
    },
    handleSelectionChange(data) {
      this.selectData = data;
    },
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { "background-color": "rgba(255,232,195,1) " };
      }
    },
    // 跳转编辑
    handleGoEdit(index, row) {
      this.$router.push("/list-query/peoplemanage/edit-item/" + row.id);
    },
    // 跳转详情
    handleGoDetail(index, row) {
      this.$router.push(
        `/list-query/peoplemanage/item-detail/${row.id}/${index}`
      );
    },
    // 跳转新增
    handleGoNew() {
      this.$router.push("/list-query/peoplemanage/new-item");
    },
    // 删除列表数据
    handleDelete(index, row) {
      // this.dialogVisible = true;
      this.deleteLog();
      this.delDemoId = row.id;
    },
    // 批量删除并刷新列表
    handleDelSelected() {
      if (this.idArrSelected) {
        this.typeDel = "all";
        this.deleteLog();
      } else {
        this.$message({
          message: "请选择您要删除的数据",
          type: "warning"
        });
      }
    },
    // 分页
    // 上一页
    handlePrev() { },
    // 下一页
    handleNext() { },
    //  显示条数更改
    handleSizeChange(val) {
      this.pageNoCode = 1;
      if (val !== "none") {
        this.pageSizeCode = val;
        setSessionItem("pageSize", this.tableName, val);
      }
      // this.getpeoplemanageList(this.formDataSearch);
    },
    // 获取默认条数
    getLocalPageSize() {
      return (
        getSessionItem("pageSize", this.tableList.peoplemanageItemListAll) || 10
      );
    },
    // 当前页码更改
    handleCurrentChange(val) {
      // 跳转翻页都会调这个方法
      this.pageNoCode = val;
      // this.getpeoplemanageList(this.formDataSearch);
    },
    // 分页 end
    // 高级搜索所需函数 start
    // 高级搜索展开按钮
    search(searchData) {
      this.pageNoCode = 1;
      this.formDataSearch = searchData;
      // this.getpeoplemanageList(this.formDataSearch);
    },
    // 高级搜索 end
    // 数据请求
    // getpeoplemanageList(reqObj) {
    //   let obj = {};
    //   obj = typeof reqObj == "object" ? reqObj : obj;
    //   obj.pageNo = this.pageNoCode;
    //   obj.workStatus = this.workStatus;
    //   obj.isDelete = 0;
    //   obj.isShowPageLoading = true;
    //   obj.workStatus = this.workStatus;
    //   obj.isDelete = 0;
    //   obj.isShowPageLoading = true;
    //   getpeoplemanageList(obj).then(res => {
    //     this.isShowPagination = res.data.data.recordsTotal > 0;
    //     this.tableData = res.data.data.rows;
    //     this.totalNum = res.data.data.recordsTotal;
    //     this.pageNoCode = res.data.data.pageNo; // 当前页
    //     this.tableData.forEach((i, index) => {
    //       i.departmentId = i.departmentId
    //         ? JSON.parse(i.departmentId)[0].abbrName
    //         : "";
    //     });
    //   });
    // },
    // 全选、多选选择
    handleCheckAllChange(val) {
      this.isIndeterminate = false;
      const arr = [];
      for (let i = 0; i < val.length; i++) {
        arr.push(val[i].id);
      }
      this.idArrSelected = arr;
      if (val.length) {
        this.isSelection = true;
      } else {
        this.isSelection = false;
      }
      if (typeof val === "boolean") {
        if (val) {
          this.toggleSelection(this.tableData);
        } else {
          this.toggleSelection([]);
        }
      } else {
        this.checkAll = val.length !== 0;
      }
    },
    handleCheckChange(val) {
      const arr = [];
      for (let i = 0; i < val.length; i++) {
        arr.push(val[i].id);
      }
      this.idArrSelected = arr;
      if (val.length) {
        this.isSelection = true;
      } else {
        this.isSelection = false;
      }
      if (val.length > 0 && val.length < 2) {
        this.isIndeterminate = true;
      } else if (val.length === 2) {
        this.checkAll = true;
        this.isIndeterminate = false;
      } else {
        this.checkAll = false;
        this.isIndeterminate = false;
      }
    },
    toggleSelection(rows) {
      this.$refs.multipleTable.clearSelection();
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      }
    },
    // 排序
    sortChange(params) {
      this.sortord = params.order;
      this.sortprop = params.prop;
      // this.getpeoplemanageList();
    },
    // 页签跳转
    tabChange(data) {
      this.$router.push({ name: `contract-contractMeasurement-${data}` });
    }
  },
  activated() {
    // this.getpeoplemanageList(this.formDataSearch);
  }
};
